<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title th:text="${classObj.className} + ' 的学生 - 企业培训平台'">班级学生 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* General styling for the page */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f4f7f6;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
        }

        .container {
            flex-grow: 1;
            padding: 20px;
            max-width: 1200px;
            margin: 20px auto;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e0e0e0;
        }

        .page-header h2 {
            color: #333;
            font-size: 2em;
            margin: 0;
        }

        /* Class Info Section */
        .class-info {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #e9f5ff;
            border: 1px solid #cce7ff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .class-info p {
            margin-bottom: 8px;
            font-size: 1.1em;
            color: #333;
        }
        .class-info p strong {
            color: #0056b3;
        }

        /* Add Student Section */
        .add-student-section, .students-list-section {
            background-color: #f9f9f9;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }

        .add-student-section h3, .students-list-section h3 {
            color: #444;
            font-size: 1.6em;
            margin-top: 0;
            margin-bottom: 20px;
            border-bottom: 1px dashed #e0e0e0;
            padding-bottom: 10px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }

        .form-group input[type="text"] {
            width: calc(100% - 20px);
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 1em;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

        .form-group input[type="text"]:focus {
            border-color: #007bff;
            outline: none;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .btn-primary {
            background-color: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }

        .btn-danger {
            background-color: #dc3545;
            color: white;
        }

        .btn-danger:hover {
            background-color: #c82333;
            transform: translateY(-2px);
        }

        /* Student Table */
        .student-table {
            width: 100%;
            border-collapse: separate; /* Use separate to allow border-radius on cells */
            border-spacing: 0;
            margin-top: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-radius: 10px;
            overflow: hidden; /* Ensures rounded corners are visible */
        }

        .student-table th, .student-table td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .student-table th {
            background-color: #f2f2f2;
            font-weight: bold;
            color: #333;
            text-transform: uppercase;
            font-size: 0.9em;
        }

        .student-table tbody tr:last-child td {
            border-bottom: none;
        }

        .student-table tbody tr:hover {
            background-color: #f5f5f5;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .no-students-message {
            text-align: center;
            padding: 40px;
            color: #666;
            font-size: 1.2em;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        /* Modal Styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
        }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 30px;
            border: 1px solid #888;
            border-radius: 10px;
            width: 80%; /* Could be more responsive */
            max-width: 500px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            text-align: center;
            position: relative;
        }

        .modal-content h3 {
            margin-top: 0;
            color: #333;
            font-size: 1.8em;
            margin-bottom: 20px;
        }

        .modal-content p {
            font-size: 1.1em;
            color: #555;
            margin-bottom: 25px;
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        .modal-buttons .btn {
            min-width: 100px;
            padding: 12px 25px;
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #5a6268;
            transform: translateY(-2px);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .container {
                margin: 10px;
                padding: 15px;
            }
            .page-header h2 {
                font-size: 1.5em;
            }
            .student-table th, .student-table td {
                padding: 10px;
                font-size: 0.9em;
            }
            .modal-content {
                width: 95%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div> <div class="container">
    <div class="page-header">
        <h2 th:text="${classObj.className} + ' 的学生管理'">班级学生管理</h2>
    </div>

    <div th:if="${successMessage}" class="alert alert-success">
        <p th:text="${successMessage}"></p>
    </div>
    <div th:if="${errorMessage}" class="alert alert-danger">
        <p th:text="${errorMessage}"></p>
    </div>

    <div class="class-info">
        <p>班级名称: <strong th:text="${classObj.className}"></strong></p>
        <p>班级ID: <strong th:text="${classObj.id}"></strong></p>
        <p>学生数量: <strong th:text="${classObj.classStuNum != null ? classObj.classStuNum : '0'}"></strong></p>
    </div>

    <div class="add-student-section">
        <h3>添加学生到班级</h3>
        <form th:action="@{/class/{classId}/students/add(classId=${classObj.id})}" method="post">
            <div class="form-group">
                <label for="studentNum">学生学号:</label>
                <input type="text" id="studentNum" name="studentNum" required placeholder="请输入学生学号">
            </div>
            <button type="submit" class="btn btn-primary">添加学生</button>
        </form>
    </div>

    <div class="students-list-section">
        <h3>班级已有学生</h3>
        <div th:if="${!#lists.isEmpty(studentsInClass)}">
            <table class="student-table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>学生姓名</th>
                    <th>学号</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="student : ${studentsInClass}">
                    <td th:text="${student.id}"></td>
                    <td th:text="${student.stuName}"></td>
                    <td th:text="${student.stuNum}"></td>
                    <td class="action-buttons">
                        <button type="button" class="btn btn-danger"
                                th:data-class-id="${classObj.id}"
                                th:data-student-id="${student.id}"
                                th:data-student-name="${student.stuName}"
                                th:data-student-num="${student.stuNum}"
                                onclick="openDeleteModal(this)">移除</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div th:unless="${!#lists.isEmpty(studentsInClass)}" class="no-students-message">
            <p>该班级目前还没有学生。</p>
        </div>
    </div>
</div>

<div id="deleteModal" class="modal">
    <div class="modal-content">
        <h3>确认移除学生</h3>
        <p>您确定要将学生 <strong id="studentNameToDelete"></strong> (学号: <strong id="studentNumToDelete"></strong>) 从班级中移除吗？</p>
        <div class="modal-buttons">
            <button type="button" class="btn btn-secondary" onclick="closeDeleteModal()">取消</button>
            <form id="deleteStudentForm" method="post" style="display: inline;">
                <button type="submit" class="btn btn-danger">确认移除</button>
            </form>
        </div>
    </div>
</div>

<script>
    // Get the modal element
    var deleteModal = document.getElementById("deleteModal");
    var studentNameToDeleteSpan = document.getElementById("studentNameToDelete");
    var studentNumToDeleteSpan = document.getElementById("studentNumToDelete");
    var deleteStudentForm = document.getElementById("deleteStudentForm");

    // Function to open the delete confirmation modal
    // Now accepts the button element itself as a parameter
    function openDeleteModal(buttonElement) {
        // Read data from the button's data- attributes
        var classId = buttonElement.dataset.classId;
        var studentId = buttonElement.dataset.studentId;
        var studentName = buttonElement.dataset.studentName;
        var studentNum = buttonElement.dataset.studentNum; // Get student number

        studentNameToDeleteSpan.textContent = studentName;
        studentNumToDeleteSpan.textContent = studentNum; // Set student number
        deleteStudentForm.action = `/class/${classId}/students/delete/${studentId}`;
        deleteModal.style.display = "flex"; // Use flex to center the modal
    }

    // Function to close the delete confirmation modal
    function closeDeleteModal() {
        deleteModal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == deleteModal) {
            closeDeleteModal();
        }
    }
</script>
</body>
</html>
